{extend name="index/layout" /}
{block name="main"}
    <div class="container-fluid">
        <div class="row head ">
            <img class="img-responsive" src="http://image.rg.mymaiyu.com/location_bg_head.jpg?v={$version}">
        </div>
        <div class="row footer ">
            <img class="img-responsive" src="http://image.rg.mymaiyu.com/location_bg_footer.jpg?v={$version}">
        </div>
        <div id="mask">

        </div>
        <div id="panel-bg" >
            <div id="panel">
                <img id="confirm" src="http://image.rg.mymaiyu.com/confirm.png?v={$version}">
                <img class="close-btn" src="http://image.rg.mymaiyu.com/close.png?v={$version}">
            </div>
        </div>
        <div id="input-panel">
            <input id="name">
            <input id="mobile">
            <img id="submit" src="http://image.rg.mymaiyu.com/submit.png?v={$version}">
            <img class="close-btn" src="http://image.rg.mymaiyu.com/close.png?v={$version}">
        </div>

        <div id="fail-panel">
            <img class="close-btn" src="http://image.rg.mymaiyu.com/close.png?v={$version}">
        </div>

        <div class="icon-container">
            <div class="row icon-row">
                <div class="col-xs-2" ></div>
                <div class="col-xs-4 ">
                    {if $icon_1['is_log'] eq 1}
                        <img class="img-responsive" src="http://image.rg.mymaiyu.com/icon_1_success.png?v={$version}">
                    {else}
                        <img onclick="show_map({$icon_1['longitude']},{$icon_1['latitude']},'{$icon_1['name']}')" class="img-responsive" src="http://image.rg.mymaiyu.com/icon_1.png?v={$version}">
                    {/if}
                </div>
                <div class="col-xs-4" >
                    {if $icon_2['is_log'] eq 1}
                        <img class="img-responsive" src="http://image.rg.mymaiyu.com/icon_2_success.png?v={$version}">
                    {else}
                        <img onclick="show_map({$icon_2['longitude']},{$icon_2['latitude']},'{$icon_2['name']}')" class="img-responsive" src="http://image.rg.mymaiyu.com/icon_2.png?v={$version}">
                    {/if}
                </div>
                <div class="col-xs-2" ></div>
            </div>
            <div class="row icon-row">
                <div class="col-xs-4">
                    {if $icon_3['is_log'] eq 1}
                        <img class="img-responsive" src="http://image.rg.mymaiyu.com/icon_3_success.png?v={$version}">
                    {else}
                        <img onclick="show_map({$icon_3['longitude']},{$icon_3['latitude']},'{$icon_3['name']}')" class="img-responsive" src="http://image.rg.mymaiyu.com/icon_3.png?v={$version}">
                    {/if}
                </div>
                <div class="col-xs-4">
                    {if $icon_4['is_log'] eq 1}
                        <img class="img-responsive" src="http://image.rg.mymaiyu.com/icon_4_success.png?v={$version}">
                    {else}
                        <img onclick="show_map({$icon_4['longitude']},{$icon_4['latitude']},'{$icon_4['name']}')" class="img-responsive" src="http://image.rg.mymaiyu.com/icon_4.png?v={$version}">
                    {/if}
                </div>
                <div class="col-xs-4">
                    {if $icon_5['is_log'] eq 1}
                        <img class="img-responsive" src="http://image.rg.mymaiyu.com/icon_5_success.png?v={$version}
">
                    {else}
                        <img onclick="show_map({$icon_5['longitude']},{$icon_5['latitude']},'{$icon_5['name']}')" class="img-responsive" src="http://image.rg.mymaiyu.com/icon_5.png?v={$version}">
                    {/if}
                </div>
            </div>

            <div class="row icon-row">
                <div class="col-xs-2" ></div>
                <div class="col-xs-4">
                    {if $icon_6['is_log'] eq 1}
                        <img class="img-responsive" src="http://image.rg.mymaiyu.com/icon_6_success.png?v={$version}">
                    {else}
                        <img onclick="show_map({$icon_6['longitude']},{$icon_6['latitude']},'{$icon_6['name']}')" class="img-responsive" src="http://image.rg.mymaiyu.com/icon_6.png?v={$version}">
                    {/if}
                </div>
                <div class="col-xs-4">
                    {if $icon_7['is_log'] eq 1}
                        <img class="img-responsive" src="http://image.rg.mymaiyu.com/icon_7_success.png?v={$version}">
                    {else}
                        <img onclick="show_map({$icon_7['longitude']},{$icon_7['latitude']},'{$icon_7['name']}')" class="img-responsive" src="http://image.rg.mymaiyu.com/icon_7.png?v={$version}">
                    {/if}
                </div>
                <div class="col-xs-2" ></div>
            </div>
            <div class="row icon-row">
                <div class="col-xs-4">
                    {if $icon_8['is_log'] eq 1}
                        <img class="img-responsive" src="http://image.rg.mymaiyu.com/icon_8_success.png?v={$version}">
                    {else}
                        <img onclick="show_map({$icon_8['longitude']},{$icon_8['latitude']},'{$icon_8['name']}')" class="img-responsive" src="http://image.rg.mymaiyu.com/icon_8.png?v={$version}">
                    {/if}
                </div>
                <div class="col-xs-4">

                    {if $icon_9['is_log'] eq 1}
                        <img class="img-responsive" src="http://image.rg.mymaiyu.com/icon_9_success.png?v={$version}">
                    {else}
                        <img onclick="show_map({$icon_9['longitude']},{$icon_9['latitude']},'{$icon_9['name']}')" class="img-responsive" src="http://image.rg.mymaiyu.com/icon_9.png?v={$version}">
                    {/if}
                </div>
                <div class="col-xs-4">
                    {if $icon_10['is_log'] eq 1}
                        <img class="img-responsive" src="http://image.rg.mymaiyu.com/icon_10_success.png?v={$version}">
                    {else}
                        <img onclick="show_map({$icon_10['longitude']},{$icon_10['latitude']},'{$icon_10['name']}')" class="img-responsive" src="http://image.rg.mymaiyu.com/icon_10.png?v={$version}">
                    {/if}
                </div>
            </div>
        </div>

        {if $can_exchange eq 1}
            <div onclick="show_exchange()" class="row exchange-btn-enable"></div>
        {else}
            <div class="row exchange-btn-disable"></div>
        {/if}

    </div>
{/block}
{block name="script"}
    <script type="text/javascript" charset="utf-8">
        $('.close-btn').on('click',function () {
            $('#mask').css('display','none');
            $('#panel-bg').css('display','none');
            $('#input-panel').css('display','none');
            $('#fail-panel').css('display','none');
            $('#name').val = '';
            $('#mobile').val = '';
        });
        $('#confirm').on('click',function(){
            $('#panel-bg').css('display','none');
            $('#input-panel').css('display','block');
        });
        $('#submit').on('click',function(){
            var name = $('#name').val();
            var mobile = $('#mobile').val();
            var url = '{:url('check_mobile')}';
            var d = new Object();
            d.name = name;
            d.mobile = mobile;
            $.post(url,d,function(data){
                if(data.code == 10000){
                    window.location.href = '{:url('exchange')}';
                }else if(data.code == 10001){
                    $('#input-panel').css('display','none');
                    $('#fail-panel').css('display','block');
                }else{
                    alert(data.msg);
                }
            });
        });
        function show_exchange(){
            {if $have_verify eq 1}
            $('#mask').css('display','block');
            $('#input-panel').css('display','none');
            $('#fail-panel').css('display','block');
            alert('您已经兑换过了，兑换时间为：{$verify_time|date="Y-m-d H:i:s",###}');
            {elseif $have_check_mobile eq 1}
            window.location.href = '{:url('exchange')}';
            {else}
            $('#mask').css('display','block');
            $('#panel-bg').css('display','block');
            $('#input-panel').css('display','none');
            {/if}
        }
        function show_map(longitude,latitude,name){
            var lat = Number(latitude);
            var lng = Number(longitude);
            wx.openLocation({
                latitude: lat,
                longitude: lng,
                name: name,
            });
        }
    </script>
{/block}